<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询支出</title>
</head>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    #container{
        margin: 20px;
    }
    #container table{
        width: 100%;
        border: 1px solid grey;
        border-collapse: collapse;
    }
    #container table td,#container table th{
        border: 1px solid grey;
        text-align: center;
        height: 40px;
    }
    #container table td{
        font-size: 12px;
        width: 15%;
    }
    #container table tbody tr:nth-child(odd){
        background-color: #d5fcff;
    }
    #container table tbody tr:nth-child(even){
        background-color: #f4f4f4;
    }
    #container table tbody tr:hover{
        background-color: #eaf8ff;
        color: cornflowerblue;
    }
    #container a{
        text-decoration: none;
        margin-right: 10px;
    }
    #container span{
        width: 30px;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        background-color: lightcyan;
        margin: 5px;
    }
</style>
<body>
<div id="container">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox">
            </th>
            <th>编号</th>
            <th>类别</th>
            <th>价格</th>
            <th>说明</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <input type="checkbox" name="ids" value="1">
            </td>
            <td>1</td>
            <td>早餐</td>
            <td>7</td>
            <td>7个卤蛋</td>
            <td>
                <a href="">删除</a>
                <a href="">修改</a>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ids" value="1">
            </td>
            <td>1</td>
            <td>早餐</td>
            <td>7</td>
            <td>7个卤蛋</td>
            <td>
                <a href="">删除</a>
                <a href="">修改</a>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ids" value="1">
            </td>
            <td>1</td>
            <td>早餐</td>
            <td>7</td>
            <td>7个卤蛋</td>
            <td>
                <a href="">删除</a>
                <a href="">修改</a>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ids" value="1">
            </td>
            <td>1</td>
            <td>早餐</td>
            <td>7</td>
            <td>7个卤蛋</td>
            <td>
                <a href="">删除</a>
                <a href="">修改</a>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ids" value="1">
            </td>
            <td>1</td>
            <td>早餐</td>
            <td>7</td>
            <td>7个卤蛋</td>
            <td>
                <a href="">删除</a>
                <a href="">修改</a>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ids" value="1">
            </td>
            <td>1</td>
            <td>早餐</td>
            <td>7</td>
            <td>7个卤蛋</td>
            <td>
                <a href="">删除</a>
                <a href="">修改</a>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ids" value="1">
            </td>
            <td>1</td>
            <td>早餐</td>
            <td>7</td>
            <td>7个卤蛋</td>
            <td>
                <a href="">删除</a>
                <a href="">修改</a>
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="6">
                <button>批量删除</button>
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <span>1</span><span>2</span><span>3</span><span>4</span>...<span>15</span>
            </td>
        </tr>
        </tfoot>
    </table>
</div>
</body>
</html>